<template>
  <div class="feedback">
    <div class="logo"><img src="../assets/images/logo.png" alt=""></div>
    <div class="feedback_content">
      <div class="title">梦想中心</div>
      <div class="msg">如果您是一位有远见的领导者，在深度技术方面也拥有扎实而丰富的经验，我们希望您能花一些时间填写以下信息，与我们携手合作。</div>
      <div class="form">
        <div class="input"><label>公司名称 <span>*</span></label><input type="text" ref="companyName"></div>
        <div class="input"><label>电邮 <span>*</span></label><input type="text" ref="email"></div>
        <div class="input"><label>你的名字 <span>*</span></label><input type="text" ref="name"></div>
        <div class="input"><label>联络电话 <span>*</span></label><input type="text" ref="phone"></div>
        <div class="input"><label>职衔 <span>*</span></label><input type="text" ref="job"></div>
        <div class="input"><label>网站 <span>*</span></label><input type="text" ref="webUrl"></div>
        <div class="textarea"><label>描述你的梦想 <span>*</span></label>
          <textarea ref="info"></textarea>
        </div>
        <div class="file"><label>上传文件</label>
          <n-upload
              action="http://172.16.18.232:8000/upload"
              max="1"
              ref="upload"
              @update:file-list="success"
              @error="error"
          >
            <div class="file_info" v-if="upButton">等待上传</div>
          </n-upload>
        </div>
        <div class="tip">
          <img src="../assets/images/link.png" alt="">
          <span>文件大小限制：10MB<br>允许的文件类型：Word, Excel, Powerpoint, 图片(.jpg .jpeg .gif), 其他(.pdf .zip .rar) 等</span>
        </div>
        <div class="button">
          <button type="button" @click="submit">提交</button>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
import {defineComponent, ref, getCurrentInstance ,onMounted} from "vue";
export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance() //获取全局配置信息
    const upButton = ref(true);
    const uploadRef = ref(null);
    const companyName = ref();
    const email = ref();
    const name = ref();
    const phone = ref();
    const job = ref();
    const webUrl = ref();
    const info = ref();
    const fileUrl = ref();


    const submit = () => {
      var companyName = proxy.companyName.value;
      var email = proxy.email.value;
      var name= proxy.name.value;
      var phone= proxy.phone.value;
      var job= proxy.job.value;
      var webUrl= proxy.webUrl.value;
      var info= proxy.info.value;
      var emailVerify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      var phoneVerify = /(?:\(?[0\+]?\d{1,3}\)?)[\s-]?(?:0|\d{1,4})[\s-]?(?:(?:13\d{9})|(?:\d{7,8}))/;
      if(companyName==""){
        alert('公司名称不能为空')
        return;
      }
      if(email=='' || !emailVerify.test(email)){
        alert('电邮为空或格式不正确')
        return ;
      }
      if(name==""){
        alert('请填写你的名字')
        return ;
      }
      if(phone==""){
        alert('请填写电话')
        return ;
      }
      if(!phoneVerify.test(phone)){
        alert('电话格式不正确')
        return ;
      }
      if(job==""){
        alert('请填写职衔')
        return ;
      }
      if(webUrl==''){
        alert('请填写网站')
        return ;
      }
      if(info==''){
        alert('请填写你的梦想')
        return ;
      }

      proxy.$axios
          .post("/add/info", {
            companyName: companyName,
            email: email,
            name: name,
            phone: phone,
            job: job,
            webUrl: webUrl,
            info:info,
            fileUrl: '',
          })
          .then((res) => {
            //请求成功
            console.log(res)
          })
          .catch(err => {
            console.log(err)
          })
    };

    const success = (info) => {
      info.length > 0 ? upButton.value = false : upButton.value = true
    }

    const error = () => {
      upButton.value = true
      uploadRef.value.clear();
      alert('上传失败')
    }

    return {
      companyName,
      email,
      name,
      phone,
      job,
      webUrl,
      info,
      fileUrl,
      upload: uploadRef,
      upButton: upButton,
      submit,
      success,
      error,
    };
  }
});
</script>



